<!-- @ 模版最后删除 -->
<template>
	<view class="bg-white" style="min-height: 100vh;">
		<u-notify ref="uNotify" />
		<loadFlex :loading="loading" />
		<uni-nav-bar dark :fixed="true" color="#fff" background-color="#6FAFA7" title="新增维护单">
			<view style="width: 100%;height: 100%;font-size: 36rpx;" class="flex justify-center align-center">
				<view class="flex justify-center align-center">
					<image src="../../static/icon/ZY.png" class="margin-right-xs" style="width: 45rpx;height: 45rpx;" />
					新增维护单
				</view>
			</view>
		</uni-nav-bar>
		<uni-forms ref="valiForm" class="padding-top padding-lr-sm" :rules="rulesFrom" :modelValue="model"
			labelWidth="375px" label-position="top">
			<uni-forms-item required name="projectTitle">
				<template #label>
					<view class="flex align-center" style="height: 40px;">
						<i class="icon-required">*</i>
						<img src="../../static/icon/BCNR.png" class="margin-lr-xs"
							style="width:15px;height: 15px;font-size: 36rpx;" />
						<text>改进内容</text>
					</view>
				</template>
				<uni-easyinput :maxlength="-1" v-model="model.projectTitle" type="textarea"
					placeholder="请输入改进内容"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item required name="username">
				<template #label>
					<view class="flex align-center" style="height: 40px;">
						<i class="icon-required">*</i>
						<img src="../../static/icon/user1.png" class="margin-lr-xs"
							style="width:15px;height: 15px;font-size: 36rpx;" />
						<text>提出人</text>
					</view>
				</template>
				<uni-easyinput v-model="model.username" placeholder="请输入姓名"></uni-easyinput>
			</uni-forms-item>
			<view class="flex justify-between align-center">
				<view style="width: 49%;">
					<uni-forms-item required name="belongingTo">
						<template #label>
							<view class="flex align-center" style="height: 40px;">
								<i class="icon-required">*</i>
								<img src="../../static/icon/FW.png" class="margin-lr-xs"
									style="width:15px;height: 15px;font-size: 36rpx;" />
								<text>服务类别</text>
							</view>
						</template>


						<uni-data-select v-model="model.belongingTo" :localdata="rangeBelongingTo"
							placeholder="请输入服务类别"></uni-data-select>
					</uni-forms-item>
				</view>
				<view style="width: 49%;">
					<uni-forms-item required name="speedOfProgress">
						<template #label>
							<view class="flex align-center" style="height: 40px;">
								<i class="icon-required">*</i>
								<img src="../../static/icon/JD1.png" class="margin-lr-xs"
									style="width:15px;height: 15px;font-size: 36rpx;" />
								<text>进度</text>
							</view>
						</template>
						<uni-easyinput v-model="model.speedOfProgress" maxlength="2"
							placeholder="请输入进度"></uni-easyinput>
					</uni-forms-item>
				</view>
			</view>



			<view class="flex justify-between align-center">
				<view @click="handStaging(2)" style="width: 49%;">
					<uni-forms-item required name="orderStartDate">
						<template #label>
							<view class="flex align-center" style="height: 40px;">
								<i class="icon-required">*</i>
								<img src="../../static/icon/SJ.png" class="margin-lr-xs"
									style="width:15px;height: 15px;font-size: 36rpx;" />
								<text>提出日期</text>
							</view>
						</template>
						
						<uni-easyinput disabled style="pointer-events: none;background-color: #fff !important"
							v-model="model.orderStartDate" placeholder="请选择提出日期" />
					</uni-forms-item>
				</view>
				<view @click="handStaging(1)" style="width: 49%;">
					<uni-forms-item  required name="orderEndDate">
						<template #label>
							<view class="flex align-center" style="height: 40px;">
								<i class="icon-required">*</i>
								<img src="../../static/icon/SJ.png" class="margin-lr-xs"
									style="width:15px;height: 15px;font-size: 36rpx;" />
								<text>预计日期</text>
							</view>
						</template>
						<uni-easyinput disabled style="pointer-events: none;background-color: #fff !important"
							v-model="model.orderEndDate" placeholder="请选择预计日期" />
					</uni-forms-item>
				</view>
			</view>

			<uni-forms-item >
				<template #label>
					<view class="flex align-center" style="height: 40px;">
						
						<img src="../../static/icon/TP.png" class="margin-lr-xs"
							style="width:15px;height: 15px;font-size: 36rpx;" />
						<text>提示图片</text>
					</view>
				</template>
				<u-upload :fileList="fileList" :sizeType="['compressed']" @afterRead="afterRead" @delete="deletePic"
					name="1" multiple :maxCount="5"></u-upload>
			</uni-forms-item>
		</uni-forms>
		<view style="width: 100%;" class="flex justify-around margin-top">
			<view class="cu-btn round text-white" style="width: 80%;background-color: #6FAFA7;" @click="portuniOpen">
				确定申报</view>
		</view>
		</uni-forms>
		<uni-calendar ref="refStaging" :insert="false" @confirm="ConfirmStaging" />
	</view>
</template>
<script>
	import myApi from '@/utils/app.js' //调用接口使用
	import loadFlex from '@/components/loadFlex/loadFlex.vue' //加载框
	export default {
		name: 'Application',
		components: {
			loadFlex
		},
		data() {
			return {
				model: {
					belongingTo: '新需求'
				},
				loading: false,

				fileList: [],
				rangeBelongingTo: [{
						value: '合同功能',
						text: "合同功能"
					},
					{
						value: "新需求",
						text: "新需求"
					},
					{
						value: "优化改进",
						text: "优化改进"
					},
					{
						value: "BUG",
						text: "BUG"
					},
				],
				dataIndex: 0,
				handleUpload: {
					fileName: '', // 您可以动态设置文件名称
					biz: 'ls_audio',
				},
				rulesFrom: {
					speedOfProgress: {
						rules: [{
							required: true,
							errorMessage: '请输入进度'
						}]
					},
					username: {
						rules: [{
							required: true,
							errorMessage: '请输入提出人'
						}]
					},
					orderStartDate: {
						rules: [{
							required: true,
							errorMessage: '请选择开始时间'
						}]
					},
					orderEndDate: {
						rules: [{
							required: true,
							errorMessage: '请选择结束时间'
						}]
					},
					projectTitle: {
						rules: [{
							required: true,
							errorMessage: '请输入标题'
						}]
					},
					belongingTo: {
						rules: [{
							required: true,
							errorMessage: '请输入服务类别'
						}]
					},

				},
			}
		},
		created() {
			const now = new Date();
			const year = now.getFullYear();
			const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
			const day = String(now.getDate()).padStart(2, '0');
			const dataTime = `${year}-${month}-${day}`;
			this.model = {
				speedOfProgress: 10,
				belongingTo: '新需求',
				orderStartDate: dataTime,
				orderEndDate: dataTime,
			}
			this.handleUpload.ip = myApi.host
			this.handleUpload.fileName = 'XM1848016204699144191'
			this.fileList = []
		},
		methods: {
			onNotify(round) { // 提示
				this.$refs.uNotify.show({
					type: round.type ? round.type : 'success',
					message: round.message ? round.message : '删除成功',
					top: 50
				})
			},
			portuniOpen() { // 确定触发
				if (this.fileList.length == 0) return this.onNotify({
					type: 'error',
				})
				this.$refs.valiForm.validate().then(res => {
					this.OrderEdit()
				}).catch(err => {
					this.onNotify({
						type: 'error',
						message: err[0].errorMessage,
					})
				})
			},

			async OrderEdit() {
				let urlString = undefined
				if (this.fileList && this.fileList.length > 0) {
					const urls = this.fileList.map(item => item.url);
					// 使用 join 方法将数组转换为用逗号分隔的字符串
					urlString = urls.join(',');
				}
				try {
					const res = await this.$request({
						url: myApi.supplement,
						method: 'POST',
						data: {
							orderNo: 'XM1848016204699144191',
							vto: {
								...this.model,
								state: 0,
								picPath: this.fileList && this.fileList.length > 0 ? urlString : null,
							}
						}
					});
					if (res.code == 200) {
						this.onNotify({
							message: '提交成功'
						})
						this.portuniClose()
					}
				} catch (e) {
					// 失败执行
					console.log(e)
				} finally {
					// 销毁执行
					this.loading = false
				}
			},
			portuniClose() {

				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
				const day = String(now.getDate()).padStart(2, '0');
				const dataTime = `${year}-${month}-${day}`;
				this.model = {
					speedOfProgress: 10,
					belongingTo: '新需求',
					orderStartDate: dataTime,
					orderEndDate: dataTime,
				}

				this.fileList = []
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.fileList[fileListLen]
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
				console.log(this.fileList)
			},
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			uploadFilePromise(url) {

				return new Promise((resolve, reject) => {

					let a = uni.uploadFile({
						url: myApi.picUpload, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: this.handleUpload,
						header: {

						},
						success: (res) => {
							console.log(res);
							setTimeout(() => {
								try {
									const data = JSON.parse(res.data);
									console.log(data);
									resolve(data.result[0]);
								} catch (error) {
									console.error("解析响应数据失败:", error);
									reject("解析响应数据失败");
								}
							}, 1000);
						},
						fail: (err) => {
							console.error("文件上传失败:", err);
							reject(err); // 将错误传递给 Promise 的 reject
						},
						complete: () => {
							console.log("上传操作完成（无论成功或失败）");
						}
					});
					console.log(a);
				});
			},
			handStaging(index) {
				this.dataIndex = index
				this.$refs.refStaging.open();
			},
			ConfirmStaging(e) {
				if (this.dataIndex == 2) this.$set(this.model, 'orderStartDate', e
					.fulldate);
				if (this.dataIndex == 1) this.$set(this.model, 'orderEndDate', e
					.fulldate);
			},
		}
	}
</script>
<style lang="scss" scoped>

</style>